<template>
  <div class="battery-container">
    <div class="shell">
      <div v-for="(item,index) in batteryChunk" class="block" :key="index" :style="{
          background: `${batteryColor}`
        }"></div>
    </div>
   <div class="battery-percentage">{{capacity}}%</div>
  </div>
</template>

<script>
  export default {
    props: {
      capacity: {
        type: [Number, String],
      }
    },
    computed: {
      batteryChunk() {
        return this.findInterval(this.capacity)
      },
      batteryColor() {
        if (this.batteryChunk >= 0 && this.batteryChunk <= 1) {
          return '#FE5F69'
        } else if (this.batteryChunk > 1 && this.batteryChunk <= 4) {
          return '#FFC95C'
        } else {
          return '#64BA8C'
        }
      }
    },
    methods: {
      findInterval(num) {
        var intervalSize = 100 / 6
        var interval = Math.floor(num / intervalSize)
        if (interval === 6) {
          return interval
        } else {
          return interval + 1
        }
      }
    }
  }
</script>
<style lang='scss' scoped>
  .battery-container {
    /* display: flex; */
    width: 64px;
    height: 32px;
    border: 5px solid #DFE6EE;
    border-radius: 6px;
    position: relative;
    transform: scale(0.8);
    transform-origin: left top;

    &:after {
      content: "";
      display: block;
      height: 12px;
      width: 4px;
      position: absolute;
      background: #DFE6EE;
      right: -8px;
      top: 0;
      bottom: 0;
      margin: auto 0;
    }

    .shell {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 2px;
      background: #F8FAFC;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-column-gap: 2px;

      .block {
        width: 100%;
        height: 100%;
      }
    }
  }

  .battery-percentage {
    font-size: 24px;
    color: #52c41a;
    margin-left: 75px;
    margin-top: -20px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
</style>
